<!--
 * @Description: 新版页面布局，上下方式
 * @author: byzheng
-->
<template>
  <div class="staff-manage">
    <div v-if="showSearchBox" class="search-box">
      <slot name="search-box"></slot>
    </div>
    <div v-if="showTab || showBtnBox" class="btn-box" :class="{ 'btn-bot': showTab }">
      <div v-if="showTab" class="btn-select">
        <slot name="tab-select"></slot>
      </div>
      <div v-if="showBtnBox" class="tab-select">
        <slot name="btn-box"></slot>
      </div>
    </div>
    <div class="table-box">
      <div class="table-content">
        <slot name="table-box"></slot>
      </div>
    </div>
    <slot name="dialog"></slot>
  </div>
</template>

<script>
export default {
  props: {
    showTab: {
      type: Boolean,
      default: false
    },
    showSearchBox: {
      type: Boolean,
      default: true
    },
    showBtnBox: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.staff-manage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: $tagsViewActiveBgColor;
  padding: 0 26px;

  .search-box {
    background: transparent;
    flex-shrink: 0;
    // padding: 16px 16px 6px;
    // padding: 10px;
    // margin: 10px 0;
    margin-bottom: 20px;
  }

  .tab-select {
    flex-shrink: 0;
    // height: 50px;
    position: absolute;
    right: 0;
    z-index: 99;
  }

  .btn-box {
    flex-shrink: 0;
    width: 100%;
    height: 50px;
    position: relative;
    background: $actionBarBgColor;
    border-radius: 5px;
    // display: flex;
    margin: 10px 0;

    .btn-select {
      position: absolute;
      background: $actionBarBgColor;
      width: 98%;
      z-index: 1;
      height: 50px;
      display: flex;
      position: absolute;
      top: 0;
      left: 10px;
      align-items: center;
    }
  }

  .btn-bot {
    background: $actionBarBgColor;
    // margin-bottom: 0;
    height: 50px;
  }

  .table-box {
    width: 100%;
    height: 100%;
    position: relative;

    .table-content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}

// 弹出框  统一样式
::v-deep .el-dialog__wrapper {
  // background-color: rgba(124, 143, 143, 0.6);

  .el-dialog {

    .el-dialog__header {
      width: 100%;
      background-color: #237FC3;
      padding: 15px;

      .el-dialog__title {
        font-weight: 700;
      }

      .el-dialog__close {
        font-size: 22px;
        color: #fff;
        font-weight: 700;
      }
    }

    .el-dialog__body {
      // overflow: hidden;

      overflow-y: auto;

      .el-input__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }

      .el-textarea__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }

      .el-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .total-price {
          color: #000;
        }

        .el-row {
          width: 100%;
          // margin-bottom: 10px;

          .el-table {
            max-height: 200px;
            overflow-y: auto;
            background-color: rgba(255, 255, 255, 1);

            .cell {
              color: #000;
            }

            th {
              background-color: rgba(230, 230, 230, 1);
            }

            th.is-leaf {
              border-color: rgba(77, 77, 77, 1);
            }

            td {
              border-color: rgba(77, 77, 77, 1);
            }

            tr:hover {
              background-color: rgba(77, 77, 77, 1);
            }

            .el-table__empty-text {
              color: #000;
            }

            .current-row {
              // background-color: rgb(177, 177, 177);
              background-color: #dbdbdb !important;
            }

            .el-table__row--striped {
              background-color: rgba(255, 255, 255, 1);
            }

            // color: #000;
          }

          .el-table--border {
            border-color: rgba(77, 77, 77, 1);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }

          .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: rgb(177, 177, 177);
          }

          .el-table__body tr.current-row>td {
            background-color: #dbdbdb !important;
          }

          // .el-button {
          //   width: 100%;
          // }
          .el-form {

            // width: 100%;
            // margin: ;
            .el-form-item {
              margin-bottom: 0 !important;
            }

            .el-form-item__content {
              display: flex;
              width: 100%;

              .el-select {
                min-width: 15%;
              }

              .el-input {
                min-width: 10%;
              }

              .el-input__inner {
                border-right: none;
              }

              .el-button {
                min-width: 5%;
                margin-left: 10px;
              }
            }
          }
        }

        .el-form-item {
          display: flex;
          align-items: flex-start;

          .el-form-item__label {
            line-height: 36px;
            min-width: 120px;
            text-align: end;
          }

          .el-form-item__content {
            line-height: 36px;
            width: 100%;
            display: flex;
            // flex-direction: row;
            flex-wrap: wrap;
          }
        }
      }
    }

    .el-dialog__footer {
      width: 100%;
      border-top: 1px solid rgba(191, 191, 191, 1);
      position: inherit;
      text-align: right;
      padding: 15px;
    }

    .el-form-item__label {
      color: #000;
      font-weight: 400;
      font-size: 16px;
    }
  }
}</style>
